<template>
  <div>
    App组件
    <home></home>
    <suspense>
      <template #default><async-category></async-category></template>
      <template #fallback><loading></loading></template>
    </suspense>
    <async-category></async-category>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
import Home from "./Home.vue";
import Loading from "./Loading.vue";

// import AsyncCategory from "./AsyncCategory.vue";
const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"));

// const AsyncCategory = defineAsyncComponent({
//   loader: () => import("./AsyncCategory.vue"),
//   // 显示Loading组件
//   loadingComonent: Loading,
//   // 显示Loading组件之前等待时间
//   delay: 2000,
//   /**
//    * err: 错误信息
//    * retry: 函数，调用retry尝试重新加载
//    * attempt: 记录尝试的次数
//    */
//   onError: function(err,retry,attempt) {

//   }
// });

// import { sum } from "./utils/math";
// console.log(sum(1, 2));

// 通过import函数导入的模块，后续webpack对其打包的时候就会进行分包操作
import("./utils/math").then((res) => {
  res.num(20, 30);
});

export default {
  components: {
    Home,
    AsyncCategory,
  },
};
</script>

<style scoped></style>
